<template>
  <div >
      <div class="list">
        <div class="item" v-for="(item,index) in YyAppointment" :key="index">
          <div class="fl">
            <p><span>转出日期：</span>{{item.zcrq}}</p>
            <p><span>转出医院：</span>{{item.zcyy}}</p>
            <p><span>转入医院：</span>{{item.zryy}}</p>
            <p><span>就诊人：</span>{{name}}</p>
          </div>
          <div class="fr">
            <!--<router-link :to="{path:'/yyzz/detail'}">-->
             <a> <span class="cur" @click="goMzDetail(item)">转诊详情</span></a>
            <!--</router-link>-->
            <!-- <span>已取消</span> -->
          </div>
        </div>
      </div>
      <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
      <tips :hosName="hosName"></tips>
      <!-- 水印 -->
        <div class="watermark"></div>
  </div>
</template>

<script>
import tips from '@/components/tips.vue'
import { getYyAppointmentApi} from '@/api/healthRecords'
export default {
  name: 'yyzz',
  data () {
    return {
      hosName:'',//医院名称
        YyAppointment:[],
        name:JSON.parse(localStorage.getItem('jbxx')).xm,
        zjhmParamter: JSON.parse(localStorage.getItem('zjhm'))
    }
  },
    methods: {
        goMzDetail(item) {
            this.$router.push({ name: "yyzzDetail", query: { item } });
            localStorage.setItem('mzjbxx',  JSON.stringify(item))
        },
        getYyAppointment() {
            getYyAppointmentApi(JSON.stringify(this.zjhmParamter)).then(response => {
                if (response.data.code == 1) {
                    this.YyAppointment = response.data.data;
                }
            })
        }
    },
    created() {
        this.getYyAppointment();
    },
  components:{
      tips
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
  float: left;
}
.fr{
  float: right;
}
.list{
  .item{
    background: #fff;
    padding:1rem;
    overflow: hidden;
    margin-bottom:0.6rem;
    font-size: 1rem;
    color: #333;
    line-height: 2rem;
    span{
      color:#969696;
    }
    .fr{
      span{
        display: block;
        width:5rem;
        height: 1.6rem;
        text-align: center;
        line-height: 1.6rem;
        background: #eee;
        color:#666;
        font-size: 1rem;
        border-radius:0.2rem;
      }
      span.cur{
        background: #009CDF;
        color:#fff;
      }
    }
  }
  .item:last-child{
    margin-bottom:0;
  }
}
</style>
